@import 'variables';
//赛程组件
/**app-match-card {
  .item {
    &:last-of-type::before {
      content: none;
    }
    .stage {
      padding-left: pxTorem(24);
      line-height: pxTorem(78);
      font-size: standard($f, f4);
      color: color($h5, c3);
      background-color: color($h5, c9);
    }
    .content {
      padding: pxTorem(40) pxTorem(16) 0 pxTorem(16);
      background-color: color($h5, c10);;
    }
  }
  .basic-info {
    margin-bottom: pxTorem(36);
    @include font-dpr(24px);
    color: color($h5, c3);
    time,
    span {
      margin-right: pxTorem(16);
    }
  }
  em {
    padding-left: pxTorem(30);
    @include font-dpr(24px);
    color: color($h5, c3);
  }
  .team-logo {
    display: flex; // padding: 0 pxTorem(30);
    justify-content: space-between;
  }
  .logo-box {
    position: relative;
    width: pxTorem(140);
    text-align: center;
    seed-avatar {
      width: pxTorem(74);
      height: pxTorem(74);
    }
    p {
      position: relative;
    }
    .waiver::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      @include icon(90, 90, '#{$icons-path}/waiver.png');
    }
  }
  .avatar-box {
    position: relative;
    width: pxTorem(74);
    margin: auto;
    .seed-number {
      position: absolute;
      right: pxTorem(-10);
      bottom: 0;
      border-radius: 50%;
      width: pxTorem(34);
      height: pxTorem(34);
      line-height: pxTorem(34);
      color: color($h5, c10);
      background-color: color($h5, c1);
    }
    &.champion {
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: pxTorem(-10);
        @include icon(42, 45, '#{$icons-path}/champion.png');
      }
    }
  }
  .center {
    flex: 1;
    margin-top: pxTorem(15);
    text-align: center;
    font-size: standard($f, f14);
    color: color($h5, c2);
    // @media screen and (max-width: 320px) {
    //   font-size: pxTorem(54);
    // }
    .zero {
      color: color($h5, c6);
    }
    .no-scoring {
      @include font-dpr(26px);
      color: color($h5, c6);
    }
  }
  .name {
    align-items: center;
    margin-top: pxTorem(20);
    padding-bottom: pxTorem(40);
    @include font-dpr(28px);
    p {
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
    }
  }
}**/

app-match-card {
  .stage {
    padding-left: pxTorem(24);
    line-height: pxTorem(78);
    font-size: standard($f, f4);
    color: color($h5, c3);
    background-color: color($h5, c9);
  }
  .seed-underline {
    &:before {
      border-bottom: 1px solid #e8e8e8;
    }
    &:last-child:before {
      content: none;
    }
  }
  .detail-list {
    background-color: color(c10);
    .detail-item {
      height: pxTorem(252);
      padding: pxTorem(30) 0 pxTorem(26);
      box-sizing: border-box;
      position: relative;
    }
    .score-title {
      color: color(c3);
      font-size: standard($f, f6);
      padding: 0 pxTorem(20);
      min-height: pxTorem(60);
      span {
        margin-right: pxTorem(20);
      }
    }
    .team-box {
      flex: 1;
      position: relative;
      &:first-child {
        .team-member {
          position: absolute;
          left: 18%;
        }
        .champion:after {
          left: 0;
        }
      }
      &:last-child {
        .team-member {
          position: absolute;
          right: 18%;
        }
      }
    }
    .team-member {
      width: pxTorem(154);
      text-align: center;
      line-height: 1;
      &.waiver::after {
        content: '';
        position: absolute;
        top: 1px;
        left: 0;
        right: 0;
        margin: auto;
        @include icon(74, 74, '#{$icons-path}/waiver.png');
      }
      .team-picture {
        height: pxTorem(72);
        width: pxTorem(72);
        border-radius: 50%;
        margin: 0 auto;
        border: 2px solid color(c10);
        display: inline-block;
        position: relative;
        &:nth-child(2) {
          margin-left: pxTorem(-38);
        }
        &.champion:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          @include icon(40, 40, '#{$icons-path}/champion.png');
        }
      }
      .team-name {
        padding-top: pxTorem(30);
        color: color(c2);
        font-size: standard($f, f6);
        @include multi-line-exllipsis(1);
      }
    }
    .score-panel {
      text-align: center;
      line-height: 1;
      padding-top: pxTorem(24);
      width: pxTorem(152);
      font-size: standard($f, f14);
      color: color(c2);
      .cancel {
        color: color(c6);
        font-size: standard($f, f2);
      }
      .weak {
        color: color(c6);
      }
      .result {
        display: flex;
        span:first-child, span:last-child {
          flex: 1;
        }
      }
    }
    .score-info {
      display: flex;
      &.many-people {
        .team-member {
          &.waiver::after {
            @include icon(124, 74, '#{$icons-path}/waiver_two.png');
          }
        }
      }
      @media screen and (min-width: 360px) {
        .team-member {
          width: pxTorem(192);
        }
      }
      @media screen and (min-width: 400px) {
        .team-member {
          width: pxTorem(218);
        }
      }
    }
  }
}

